<template>
  <div class="chat-components">
     <div style="position: relative;">
      <img   v-if="qqdimensional " src="@/assets/image/footer/foot1.png" alt="" style="position: absolute;top: 0;left:-120px;width:110px;height:120px" />
      <img src="@/assets/image/floatBTN-qq.png" alt=""   @click="handleOpenErweima(1)" /> 
     </div>
     <div style="position: relative;">
      <img   v-if="qqdimensional2 " src="@/assets/image/footer/foot2.png" alt="" style="position: absolute;top: 0;left:-120px;width:110px;height:120px"   />
      <img src="@/assets/image/floatBTN-wechat.png" alt=""   @click="handleOpenErweima(2)" /> 
     </div>
    <div class="icon"></div>
    <img
      @click="handleOpenChat"
      class="open-chat"
      src="@/assets/image/floatBTN-customService.png"
      alt=""
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import EventBus from "@/utils/eventBus.js";
const showChat = ref(false);
const qqdimensional = ref(false);
const qqdimensional2 = ref(false);
const handleOpenChat = () => {
  EventBus.emit("openCustomerChat", {
    message: "您好，我想了解更多信息",
  });
};
const handleOpenErweima = (flag) => {
  if (flag === 1) {
    qqdimensional2.value = false;
    qqdimensional.value=!qqdimensional.value
  }else{
    qqdimensional.value = false;
    qqdimensional2.value=!qqdimensional2.value
  }

};
</script>

<style lang="scss" scoped>
.chat-components {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 6;
  img {
    width: 64px;
    height: 64px;
    cursor: pointer;
  }
  .icon {
    width: 8px;
    height: 2px;
    background: #e62e3d;
    border-radius: 0px 0px 0px 0px;
    margin: 8px 0 16px 0;
  }
  .open-chat {
    cursor: pointer;
  }
}
@media only screen and (max-width: 1200px) {
  .chat-components {
    img {
      width: 44px;
      height: 44px;
    }
  }
}
</style>
<style lang="scss">
.chat-components-chat-img {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  width: 150px;
  height: 150px;
  padding: 8px;
  background: none;
  border: none;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  .erweima-img {
    img {
      width: 120px;
      height: 120px;
    }
  }
}
</style>
